<template>
  <div class="select" :class="theme">
    <select v-model="selectedYear" @change="changeYear">
      <option v-for="year in yearRange" :key="year" :value="year">
        {{ year }}
      </option>
    </select>
  </div>
</template>

<script setup name="yearSelect">
import { ref } from "vue";
import { useYearStore } from "@/store/index";
const yearStore = useYearStore();
const yearRange = ref(yearStore.selectYear);
const selectedYear = ref(yearStore.year);
const props = defineProps({
  theme: {
    type: String,
    default: "purple",
  },
});

const changeYear = (e) => {
  yearStore.setYear(selectedYear.value);
};
</script>
<style lang="scss" scoped>
.select {
  &.blue {
    select {
      background: rgba(#159aff, 0.26);
      border: 1px solid rgba(21, 154, 255, 0.35);
      option {
        color: #333;
      }
    }
  }
  &.purple {
    select {
      border: 1px solid #184e97;
      background: #1a2660;
      option {
        color: #d0deee;
      }
    }
  }
  select {
    width: 132px;
    height: 32px;
    padding: 0 10px;
    position: relative;
    outline: none;
    font-family: "douyuFont" !important;
    color: #fff;
    font-weight: normal;
    font-size: 16px;
    line-height: 18px;
    text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.74);
    text-align: center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  select option {
    border: 1px solid rgba(21, 154, 255, 0.35);
    background: linear-gradient(180deg, #1a2660 0%, #384e99 100%);
  }

  &:after {
    content: "";
    width: 14px;
    height: 8px;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed #fff;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    position: absolute;
    right: 20px;
    top: 41%;
    pointer-events: none;
  }
}
</style>
